<template>
    <el-table :data="tableData" border>
        <el-table-column prop="role" label="角色" width="260" />
        <el-table-column prop="aparment" label="部门/院系" width="180" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="260">
            <template #default>
                <el-button link type="primary" bg size="small" @click="handleClick">分配菜单</el-button>
                <el-button link type="primary" size="small">编辑</el-button>
                <el-button link type="warning" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="分配角色菜单" width="30%" style="height: 600px;" @open="open">
        <div style="height: 460px;overflow: hidden;">
            <el-tree ref="tree" :data="data" :props="defaultProps" show-checkbox node-key="id"
                :default-checked-keys="checkArray" default-expand-all check-on-click-node check-strictly
                @check="handleCheckNode" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="sure">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>


</template>


<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useMainStore } from '../store/index.js'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const tableData = [
    {
        role: '校领导',
        aparment: '学校办公室',
        createTime: '2025-03-06 15:32:52',
        remark: '库里',
        width: '180'
    },
    {
        role: '学生处',
        aparment: '学生办公室',
        createTime: '2025-03-06 15:32:52',
        remark: '詹姆斯',
        width: '180'
    },
    {
        role: '心理老师',
        aparment: '教学楼',
        createTime: '2025-03-06 15:32:52',
        remark: '乔治',
        width: '180'
    },
    {
        role: '校文员',
        aparment: '学校办公室',
        createTime: '2025-03-06 15:32:52',
        remark: '拉拉',
        width: '180'
    },
]
const data = ref([])
data.value = [
    {
        path: "/home",
        name: "home",
        label: "首页",
        icon: "HomeFilled",
        url: "home",
        id: 1
    }, {
        path: "/user",
        name: "user",
        label: "用户管理",
        icon: "user",
        url: "user",
        id: 2
    }, {
        label: "其他",
        icon: "location",
        path: '/other',
        id: 3,
        children: [{
            path: "/page1",
            name: "page1",
            label: "页面1",
            icon: "setting",
            url: "page1",
            id: 4,
            parentId: 3
        }, {
            path: "/page2",
            name: "page2",
            label: "页面2",
            icon: "setting",
            url: "page2",
            id: 5,
            parentId: 3
        }]
    }
]

const defaultProps = {
    children: 'children',
    label: 'label',
}
let checkArray = ref([])

let open = () => {
    checkArray.value = []
    let menuList = useMainStore().menuList
    console.log('menu', menuList);
    useMainStore().menuList.forEach(item => {
        if (item.children) {
            item.children.forEach(s => {
                checkArray.value.push(s.id)
            })
        } else {
            checkArray.value.push(item.id)
        }
    })
}
let tree = ref(null)
// 递归选中父亲
const handleParentNode = (id) => {
    const _node = tree.value?.getNode(id)
    if (!_node) return
    if (_node.data.parentId) {
        tree.value.setChecked(_node.data.parentId, true)
        if (_node.parent.data.parentId) {
            handleParentNode(_node.parent.data.id)
        }
    }
}

let handleCheckNode = async (val) => {
    const _node = tree.value.getNode(val.id)
    console.log('节点信息', _node);
    if (!_node) {
        return
    }
    // 子级选中,父级也会被选中
    if (_node.data.parentId && _node.checked && !_node.parent.checked) {
        handleParentNode(val.id)
    }
    // 父级选中,子级也要全选跟随父亲
    if (_node.data.children?.length) {
        for (const item of _node?.data?.children) {
            tree.value.setChecked(item.id, _node.checked)
            // 递归设置孙子级的选中/取消
            let _promises = []
            if (item?.children?.length) {
                _promises.push(handleCheckNode(item))
            }
            await Promise.all(_promises)
        }

    }
}

let dialogVisible = ref(false)

let handleClick = () => {
    dialogVisible.value = true
}
let sure = () => {
    let newMenu = tree.value.getCheckedKeys()
    console.log('确认新菜单', newMenu);
    dialogVisible.value = false
    ElMessage({
        message: "保存成功",
        type: "success",
    });
}
</script>

<style lang='less' scoped></style>